<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/examindex' }">考试管理</el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ path: '/examoverview' }">考试概览</el-breadcrumb-item>
			  <el-breadcrumb-item>仲裁处理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="contentMain">
			<div class="searchlist">
				 <router-link to="/taskallocation" active-class="hover">任务分配</router-link>
				 <router-link to="/reviewprogress" active-class="hover">评阅进度</router-link>
				 <router-link to="/monitoringoverview" active-class="hover">监控概览</router-link>
				 <router-link to="/exceptionhandling" active-class="hover">异常处理</router-link>
				 <router-link to="/arbitrationprocessing" active-class="hover">仲裁处理</router-link>
			</div>
			<div class="jkgailanContent">
				<div class="jkgailanContentLeft">
					<el-menu
					      class="el-menu-vertical-demo"
						  default-openeds="1"
					      @open="handleOpen"
					      @close="handleClose">
					      <el-submenu index="1">
					        <template slot="title">
					          <span>语文(进度)</span>
					        </template>
							<el-menu-item index="1-1">12(100%)</el-menu-item>
							<el-menu-item index="1-2">13(100%)</el-menu-item>
							<el-menu-item index="1-3">14(100%)</el-menu-item>
							<el-menu-item index="1-4">作文(100%)</el-menu-item>
					      </el-submenu>
					    </el-menu>
				</div>
				<div class="jkgailanContentRight">
					<div class="echartsContent">
						<div class="chooseselect" style="padding-top:14px;">
							<div>
								<el-select v-model="value" placeholder="已仲裁/未仲裁">
								    <el-option
								      v-for="item in options"
								      :key="item.value"
								      :label="item.label"
								      :value="item.value">
								    </el-option>
								</el-select>
							</div>
							<em>批量处理</em>
						</div>
						<div class="tableStyle">
							<el-table
								class="custom-table"
							    ref="multipleTable"
							    :data="yclist"
							    tooltip-effect="dark"
							    style="width: 100%"
							    @selection-change="handleSelectionChange"
								stripe
								:header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
							    <el-table-column
							      type="selection"
							      width="55">
							    </el-table-column>
							    <el-table-column
							      label="试题密号">
							      <template slot-scope="scope">{{ scope.row.my }}</template>
							    </el-table-column>
							    <el-table-column
							      prop="questionnumber"
							      label="最终分">
							    </el-table-column>
							    <el-table-column
							      prop="mark"
							      label="一评分数">
							    </el-table-column>
								<el-table-column
								  prop="mark"
								  label="一评教师">
								</el-table-column>
								<el-table-column
								  prop="mark"
								  label="二评分数">
								</el-table-column>
								<el-table-column
								  prop="mark"
								  label="二评教师">
								</el-table-column>
								<el-table-column
								  label="仲裁状态">
								  <template slot-scope="scope">
									  <span :class="scope.row.status==0?'green':'red'" style="font-size:12px;">{{scope.row.status==0?'已仲裁':'未仲裁'}}</span>
								  </template>
								</el-table-column>
								<el-table-column
								  prop="mark"
								  label="仲裁分数">
								</el-table-column>
								<el-table-column
								  prop="mark"
								  label="仲裁教师">
								</el-table-column>
								<el-table-column
									fixed="right"
									label="操作"
									width="80"
									align="center">
									<template slot-scope="scope">
										<div>
											<el-button type="text" size="small"  @click="handleImage"  style="display: flex;align-items: center;"><img src="../../assets/image/school/pj.png" style="width:12px;margin-right:5px;" />仲裁</el-button>
										</div>
									</template>
								</el-table-column>
							  </el-table>
						</div>
						<div class="examFootercontent">
							<el-pagination
								background
							      @size-change="handleSizeChange"
							      @current-change="handleCurrentChange"
							      :current-page.sync="currentPage3"
							      :page-size="100"
								  :pager-count="5"
							      layout="prev, pager, next, jumper"
							      :total="1000">
							    </el-pagination>
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	export default{
		data(){
			return{
				multipleSelection:[],
				yclist:[
					{
						my:'1111111',
						questionnumber:'14题',
						name:'找老师',
						mark:'图像不完整',
						time:'2024-11-19 14:25:00',
						status:0,
						id:1111
					},
					{
						my:'1111111',
						questionnumber:'14题',
						name:'找老师',
						mark:'图像不完整',
						time:'2024-11-19 14:25:00',
						status:1,
						id:1111
					}
				]
			}
		},
		methods:{
			handleImage(){
				this.$router.push('/arbitrationhandling')
			}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:20px;
	}
	.breadBox{
		height:32px;
		background: #Fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.chooseselect{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:24px 0 0 14px;
	}
	.chooseselect >>> .el-input__inner{
		width:155px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.chooseselect >>> .el-input__icon{
		line-height:34px;
	}
	.chooseselect em{
		width: 104px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size:14px;
		color:#fff;
		text-align: center;
		line-height:34px;
		margin-right:14px;
		cursor: pointer;
	}
	.tableStyle{
		background:#fff;
		padding:14px;
		overflow-y: auto;
		overflow-x: hidden;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar {
		 width:4px;
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.tableStyle table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableStyle table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableStyle table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableStyle table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableStyle table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableStyle table tr td:last-child{
		border-right:none;
	}
	.tableStyle table tr td span.green{
		display: inline-block;
		color:#288F41;
		width: 48px;
		height: 22px;
		background: rgba(40,143,65,0.06);
		border-radius: 6px;
		border: 1px solid rgba(40,143,65,0.5);
	}
	.tableStyle table tr td span.red{
		display: inline-block;
		color:#EC555A;
		width: 48px;
		height: 22px;
		background: rgba(236,85,90,0.06);
		border-radius: 6px;
		border: 1px solid rgba(236,85,90,0.5);
	}
	.tableStyle table tr td b{
		color:#295CFF;
		cursor: pointer;
		font-size:14px;
		margin:0 6px;
	}
	.tableStyle table tr td b img{
		display: inline-block;
		margin-right:3px;
	}
	.tableStyle table tr:nth-child(3n){
		background:#FAFAFB
	}
	.tableStyle table tr td .el-input__inner{
		width: 100px;
		height: 30px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.tableStyle table tr td .el-input__icon{
		line-height:30px;
	}
	.jkgailanContent{
		display: flex;
		justify-content: space-between;
		margin-top:14px;
	}
	.jkgailanContentLeft{
		width: 180px;
		height:calc(100vh - 200px);
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		overflow-y:auto ;
		overflow-x: hidden;
	}
	.jkgailanContentLeft::-webkit-scrollbar {
		 width:4px;
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentLeft::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentLeft::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.el-submenu__title{
		height: 42px;
		background: #FAFAFB;
		border-radius: 10px 10px 0px 0px;
		line-height:42px;
	}
	.el-menu{
		border:none;
		background:none;
		font-size:14px;
		color:#2A303B;
		border-radius:10px;
	}
	.el-submenu .el-menu-item{
		padding:0 24px !important;
		color:#8E96A4;
		min-width:auto;
	}
	.el-menu-item:focus, .el-menu-item:hover{
		background:none;
		color:#295CFF;
	}
	
	.el-menu li:nth-child(2n){
		background: #FAFAFB;
	}
	.jkgailanContentRight{
		width: calc(100% - 195px);
		height:calc(100vh - 200px);
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		overflow-y:auto ;
		overflow-x: hidden;
	}
	.jkgailanContentRight::-webkit-scrollbar {
		 width:6px;
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentRight::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentRight::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.echartsContent{
		position:relative;
	}
	.echartInfo{
		width:85%;
		position:absolute;
		left:60px;
		top:-50px;
		display: flex;
		justify-content: space-between;
		font-size:14px;
		color:#2A303B;
		line-height:1.6
	}
	.echartInfo p{
		color:#5B6371;
		line-height:2.4
	}
	.echartInfo p b{
		color:#5B6371;
	}
	.echartInfo p b i{
		color:#295CFF;
		font-style:normal
	}
	.boxinfoset{
		text-align: right;
	}
	.boxinfoset ul{
		display: flex;
		align-items: center;
	}
	.boxinfoset ul li{
		margin-left:30px;
		position:relative;
		padding-left:20px;
	}
	.boxinfoset ul li:nth-child(1):before{
		content:'';
		width: 14px;
		height: 4px;
		background: #295CFF;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfoset ul li:nth-child(2):before{
		content:'';
		width: 14px;
		height: 4px;
		background: #EC555A;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfoset ul li:nth-child(3):before{
		content:'';
		width: 14px;
		height: 4px;
		background: #288F41;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfoset em{
		display: inline-block;
		width: 104px;
		height: 34px;
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		font-size:14px;
		color:#295CFF;
		text-align: center;
		line-height:34px;
		margin-bottom:8px;
	}
	.examFootercontent{
		padding:0 14px 30px;
		text-align: right;
	}
	.examFootercontent >>> .el-pagination__jump{
		margin-left:5px;
	}
	.examFootercontent >>> .el-pager{
		margin-top:2px;
	}
	.examFootercontent >>> .el-pager li{
		margin:0 3px;
		min-width:25px;
		height: 25px;
		line-height: 25px
	}
	.examFootercontent >>> .el-pagination button{
		margin-top:2px;
	}
	.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>